<template>
	<view>
		<view @touchmove.stop.prevent="clear" class="model-container container model-animation" :class="[redbagvisible?'model_show':'model_hidden']">
			<!--展示红包-->
			<view class="model-contents" v-if="redbagshow">
				<view class="mode-info">
					<text class="closebag"></text>
					<!-- 	<text class="closebag" v-else @click="closetip">×</text> -->
					<text>{{maintitle}}</text>
					<text class="givebag">{{subtitle}}</text>
					<image src="../../static/image/open-icon.png" @click="openbag" :class="[openlucky?'openlucky1':'openlucky2']"></image>
					<text class="smallbag" v-if="redbagobject.rand">最高 {{maxamount}} 元</text>
				</view>
				<view class="suijiicon" v-if="redbagobject.icon=='rand'">
					<image src="../../static/image/random-left.png" mode="aspectFill"></image>
				</view>
				<view class="suijiicon" v-else-if="redbagobject.icon=='newuser'">
					<image src="/static/image/newuser.png" mode="aspectFill"></image>
				</view>
			</view>

			<!--显示红包结果-->
			<view class="bagresult" v-if="!redbagshow">
				<view class="model-bag">
					<view class="resultbagclose" @click="closetip">
						<image src="/static/image/closeicon.png"></image>
					</view>
					<text>恭喜你获得现金红包</text>
					<view class="bagprize">{{amount}}<text>元</text></view>
					<text class="joinagin">{{jointip}}</text>
					<view class="sanjiao"></view>
					<view v-if="navcash" class="lottery-button" @click="closetip">完成</view>
					<view v-else class="lottery-button" @click="closetip">{{redbagobject.icon == "newuser"?'马上提现':'去参与抽奖领红包'}}</view>
				</view>
			</view>
		</view>
		<!--遮罩层-->
		<view class="model-mask-bgcolor mask-bgcolor model-animation" :class="[redbagvisible?'model-bg-show':'model-bg-hidden']"></view>
	</view>
</template>

<script>
	export default {
		props: {
			redbagvisible: {
				type: Boolean,
				default: false,
			},
			//是否显示关闭按钮
			// isshowclose:{
			// 	type:Boolean,
			// 	default:true
			// },
			//红包主标题
			maintitle: {
				type: String,
				default: '活动抽奖'
			},
			//红包副标题
			subtitle: {
				type: String,
				default: '送你一个现金红包'
			},
			//最高可领金额
			maxamount: {
				type: [String, Number],
				default: 8.8
			},
			//参与抽奖提示
			jointip: {
				type: String,
				default: '参与3个首页抽奖，再领1.88元'
			},
			//红包金额
			redbagamount: {
				type: [String, Number],
				default: 1.27
			},

			//是否前往提现
			navcash: {
				type: Boolean,
				default: false,
			},

			//红包ID
			redbagobject: {
				type: Object,
				default () {
					return {

					}
				}
			},
		},
		data() {
			return {
				redbagshow: true,
				openlucky: true, //开奖动画结束
				amount: this.redbagamount, //获取红包的金额
				lock:false,// 锁定按钮
			}
		},
		methods: {
			//去提现
			gotocash() {
				this.closetip()
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/cash/cash"
					})
				}, 800)
			},

			closetip() {
				//用户直接跳转提现页面
				if(this.redbagobject.icon == "newuser"){
					uni.$emit('closewindown', false);
					this.$nextTick(() => {
						this.redbagshow = true;
						this.openlucky = true; //初始化红包动画
						setTimeout(()=>{
							// console.log(1111111)
							uni.navigateTo({
								url:'/pages/cash/cash' 
							})
						},1000)
					})
					return
				}
				// console.log(2222222) 
				
				uni.$emit('closewindown', false);
				this.$nextTick(() => {
					this.redbagshow = true;
					this.openlucky = true; //初始化红包动画
				})
			},
			clear() {

			},

			openbag() {
				//锁定按钮
				if(this.lock){
					return
				}
				this.lock = true
				if (this.redbagobject.icon == "newuser") {
					this.openlucky = false;
					setTimeout(() => {
						this.getnewuserbag();
					}, 1500);
					return;
				}
				this.openlucky = false;
				setTimeout(() => {
					this.$HttRequest({
						url: '/redEnvelope/receive',
						param: {
							id: this.redbagobject.id
						}
					}).then((res) => {
						console.log(res);
						if (res.status === 10000) {
							//赋值随机红包
							this.amount = res.data.reward;
							//显示红包结果
							this.redbagshow = false;
							//重新渲染列表
							this.$emit('getdayredbag');
							//修改用户的金额和金币数量
							this.$changefield('integral', res.data.integral);
							this.$changefield('money', res.data.money);
							//解锁
							this.lock = false
							//刷新用户信息
							this.$emit('refrechmember');
							//随机红包领取成功后通知关闭悬浮红包
							if (this.redbagobject.icon == 'rand') {
								this.$common.state.fixredbagshow = false
								console.log('通知一下关闭红包！',this.$common.state.fixredbagshow);
							}
							//红包领取后，刷新列表红包组件
							this.$common.state.isreceive = true;
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						//console.log(error)
						this.$ShowMsg('statusCode：' + error.errMsg);
					})

				}, 1500)
			},
			//领取新人红包
			getnewuserbag() {
				this.$HttRequest({
					url: '/redEnvelope/welcomeReceive',
					param: {
						action: 'receive'
					}
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						//赋值新人红包值
						this.amount = res.data.reward;
						//显示红包结果
						this.redbagshow = false;
						//修改用户内存金额
						this.$changefield('money', res.data.money);
						//解锁
						this.lock = false
						//刷新金额 
						this.$emit('getmember');
						//显示红包进度
						this.$emit('openfixredbag');
						
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
				})
			}
		}
	}
</script>

<style lang="scss">
	.openlucky1 {
		animation: btnShake2 2s ease 0s infinite;
	}

	.openlucky2 {
		animation: btnrotateX .8s ease 0s infinite;
	}

	//旋转动画
	@keyframes btnrotateX {
		0% {
			transform: rotateY(0deg);
		}

		50% {
			transform: rotateY(180deg);
		}

		100% {
			transform: rotateY(360deg);
		}
	}

	//未开奖动画
	@keyframes btnShake2 {
		0% {
			transform: scale(1);
		}

		40% {
			transform: scale(1.1, 0.9);
		}

		60% {
			transform: scale(.9, 1.1);
		}

		80% {
			transform: scale(1.2, 0.8);
		}

		100% {
			transform: scale(1);
		}
	}

	.bagresult {
		width: 540rpx;
		height: 725rpx;
		border-radius: 15rpx;
		padding-top: 0;
		background-image: url(../../static/image/i_red_bg3.png);
		background-size: 540rpx 725rpx;
		background-repeat: no-repeat;

		.model-bag {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #db5943;

			.bagprize {
				font-size: 120rpx;
				font-weight: bold;
				height: 260rpx;

				text {
					font-size: 23rpx;
					font-weight: normal;
				}
			}

			.sanjiao {
				width: 0;
				height: 0;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 6px solid #993e2f;
			}

			.joinagin {
				color: #f2dfd0;
				font-size: 28rpx;
				font-weight: bold;
				display: flex;
				width: 90%;
				background-color: #993e2f;
				border-radius: 10rpx;
				height: 60rpx;
				justify-content: center;
				align-items: center;
			}

			.resultbagclose {
				position: relative;
				width: 100%;
				font-size: 65rpx;
				color: #fff;
				font-weight: normal;
				height: 175rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					right: -28rpx;
					top: -40rpx;
				}
			}

			.lottery-button {
				background-color: #fad076;
				color: #d05b41;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80%;
				height: 80rpx;
				box-sizing: 30rpx;
				font-size: 30rpx;
				border-radius: 40rpx;
				margin-top: 40rpx;
			}
		}
	}

	.model-titls {
		font-size: 42rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		height: 90rpx;
	}

	.model-container,
	.model-mask-bgcolor {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 32rpx;
	}

	//动画开始
	.model-animation {
		transition: all 0.5s ease-in-out;
		transition-timing-function: cubic-bezier(0.25, 1.55, 0.6, 0.65)
	}

	//背景隐藏
	.mask-bgcolor {
		background-color: #000;
		z-index: 9998;
	}

	.model-bg-show {
		visibility: visible;
		opacity: 0.8
	}

	.model-bg-hidden {
		visibility: hidden;
		opacity: 0
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		flex-direction: column;
		opacity: 0;
	}

	.model-contents {
		width: 540rpx;
		height: 725rpx;
		border-radius: 15rpx;
		padding-top: 0;
		background-image: url(../../static/image/i_red_bg2.png);
		background-size: 540rpx 725rpx;
		background-repeat: no-repeat;
		position: relative;
		z-index: 9999;

		.suijiicon {
			position: absolute;
			top: 0;
			left: 0;

			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}

	.mode-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 40rpx;
		font-size: 38rpx;
		color: #fcdfb1;

		.smallbag {
			color: #fec3b8;
			margin: 10rpx;
			font-size: 28rpx;
			font-weight: normal;
		}

		.givebag {
			font-size: 43rpx;
			height: 235rpx;
			margin: 20rpx 0;
		}

		image {
			width: 165rpx;
			height: 165rpx;

		}

		.closebag {
			width: 100%;
			font-size: 65rpx;
			color: #e3725f;
			display: flex;
			height: 100rpx;
			justify-content: flex-end;
			align-items: center;
			font-weight: normal;
		}

	}

	.close-botton {
		height: auto;
		text-align: right;
		font-size: 60rpx;
		font-weight: normal;
		height: 60rpx;
		color: #c7c7c7;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
	}

	.model_show {
		visibility: visible;
		transform: scale(1);
		opacity: 1;
	} 

	.model_hidden { 
		visibility: hidden;
		transform: scale(0);
		opacity:0
	}
</style>
